import React, { Component } from 'react';
// 引入页头组件
import { Table, Tag, Space, Pagination, message } from 'antd';
import req from '@/http/request'
import url from '@/config/url'
// 引入页头组件
import Pagehead from '@/components/PageHeader'
// 引入样式
import '@/assets/css/userlist.css'


class Index extends Component {
    constructor() {
        super()
        // 定义表头
        this.columns = [
            {
                title: '序号',
                dataIndex: 'id',
                key: 'id',
                align: 'center'
            },
            {
                title: '电影院',
                dataIndex: 'name',
                key: 'name',
                align: 'center'
            },
            {
                title: '所在城市',
                dataIndex: 'city_name',
                key: 'city_name',
                align: 'center'
            },
            {
                title: '所在区',
                dataIndex: 'district_name',
                key: 'district_name',
                align: 'center'
            },
            {
                title: '具体地址',
                dataIndex: 'address',
                key: 'address',
                align: 'center'
            },
            {
                title: '状态',
                key: 'status',
                dataIndex: 'status',
                render: (text, record) => {
                    return text === '1' ? <Tag color='green' >正常营业</Tag> : <Tag color='red'>暂停营业</Tag>
                }
            }
        ];
    }
    state = {
        page: 1, // 当前页数
        data: [],  // 获取到的数据数组
        total: 0, // 数据总条数
        keyword:'' // 搜索关键字
    }

    render() {
        return (
            <>
                <Pagehead showadd={false} title='电影列表' searchFilm={this.searchFilm}> </Pagehead>
                <Table columns={this.columns} dataSource={this.state.data} pagination={false} rowKey={(record) => { return record.id }} />
                {/* 分页组件 */}
                <Pagination defaultCurrent={this.state.page} current={this.state.page} total={this.state.total} onChange={this.loadData} />
            </>
        );
    }

    componentDidMount() {
        this.loadData(this.state.page)
    }

    loadData = (page) => {

        req.get(url.cinemaList, {
            params: { 
                page: page,
                keyword:this.state.keyword 
            }
        }).then(res => {
            console.log(res);
            this.setState({
                page: res.data.paginate.current_page,
                data: res.data.paginate.data,
                total: res.data.paginate.total
            })
        })
    }

    searchFilm=(val)=>{
        this.setState({
            keyword:val
        },()=>{
            this.loadData(this.state.page)
        })
        
    }

}



export default Index;
